<template>
	<view class="mine-container">
		<!-- 用户信息区域 -->
		<view class="user-info" @click="touserdetail">
			<image class="avatar" src="../../static/personHead.png" mode="aspectFill"></image>
			<view class="user-detail">
				<button v-if="!state.isLogin" open-type="getPhoneNumber" @getphonenumber="handleUserClick"
					class="login-text">
					你好，请点击登陆
				</button>
				<text v-if="state.isLogin" class="nickname">{{ state.nickname }}</text>
				<text v-if="state.isLogin" class="phone">{{ state.phone }}</text>
			</view>
			<text class="arrow">></text>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" @click="navigateTo('/pages/wallet/wallet')">
				<view class="item-left">
					<image class="icon" src="/static/wallet.png"></image>
					<text>我的积分</text>
				</view>
				<text class="arrow">></text>
			</view>
			
			<view class="function-item" @click="navigateTo('/pages/redemption/redemption?')">
				<view class="item-left">
					<image class="icon" src="/static/wallet.png"></image>
					<text>兑换列表</text>
				</view>
				<text class="arrow">></text>
			</view>

			<view class="function-item" @click="navigateTo('/pages/family/family')">
				<view class="item-left">
					<image class="icon" src="/static/family.png"></image>
					<text>家庭成员</text>
				</view>
				<text class="arrow">></text>
			</view>

			<view class="function-item">
				<view class="item-left">
					<image class="icon" src="/static/customer.png"></image>
					<text>客服热线</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="logout">
			<text>退出登录</text>
		</view>
		<custom-tabbar currentPath="/pages/mine/mine"></custom-tabbar>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from "vue";
	import CustomTabbar from "@/components/custom-tabbar/custom-tabbar.vue";

	import {
		request
	} from "../../js/util.js";

	const state = reactive({
		isLogin: false,
		nickname: "大熊",
		phone: "",
	});

	function touserdetail() {
		if (state.isLogin) {
			uni.navigateTo({
				url: "/pages/myDetail/myDetail"
			})
		}
	}

	async function handleUserClick(e) {
		if (e.detail.code) {
			let submitData = {
				cloudID: e.detail.cloudID,
			};
			const data = await request("getPhone", submitData);
			console.log("handleUserClick", data);
			if (data.status) {
				let phone = data.result.data.phoneNumber;
				uni.setStorageSync("phone", phone);
				state.phone = phone;
				const getOpenId = await request("getOpenId");
				if (getOpenId.status) {
					login(state.phone, getOpenId.result);
				}
			}
		}
	}

	function getOpenid() {
		uni.login({
			provider: "weixin",
			success: async function(res) {
				const data = await request("getOpenId");
				console.log("handleUserClick", data);
				if (data.status) {
					login(state.phone, data.result);
				}
			},
		});
	}

	async function login(phone, openid) {
		let submitData = {
			phone,
			openid,
			type: 0,
		};
		const data = await request("loginUser", submitData);
		console.log("login", data);
		if (data.status) {
			state.isLogin = true;
			let result = data?.result[0]
			state.nickname = result.person_name;
			state.phone = result.phone;
			uni.setStorageSync("userid", result._id);
			uni.setStorageSync("phone", result.phone);
			uni.setStorageSync("userInfo", {
				role: "user", // 或其他角色
			});
			uni.$emit("updateTabbar");
		} else {
			uni.showToast({
				title: "登录失败",
				icon: "error",
			});
		}
	}

	async function getUserDetail(phone) {
		const getOpenId = await request("getOpenId");
		if (getOpenId.status) {
			login(phone, getOpenId.result);
		}
	}

	function navigateTo(url) {
		uni.navigateTo({
			url,
		});
	}

	function logout() {
		uni.removeStorageSync("userid");
		uni.removeStorageSync("phone");
		uni.removeStorageSync("userInfo");
		uni.removeStorageSync("searchUser");
		uni.removeStorageSync("userName");
		state.isLogin = false;
		uni.navigateTo({
			url: "/pages/index/index",
		});
	}

	// 页面加载时获取数据
	onMounted(() => {
		let userid = uni.getStorageSync("userid");
		let phone = uni.getStorageSync("phone")
		console.log(userid, phone)
		if (userid && phone) {
			getUserDetail(phone);
		} else {
			state.isLogin = false;
		}
	});
</script>

<style lang="scss">
	.mine-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #ffe4e4 0%, #f5f5f5 30%);
		padding: 150rpx 20rpx 20rpx;

		.user-info {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				background-color: #d8d8d8;
			}

			.user-detail {
				flex: 1;
				margin-left: 20rpx;

				button {
					background: none;
					border: none;
					padding: 0;
					margin: 0;
					// color: $background-white;
					// font-size: $font-size-lg;
					font-weight: normal;
					line-height: 1;

					&::after {
						border: none;
					}
				}

				.nickname {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					display: block;
				}

				.phone {
					font-size: 28rpx;
					color: #999;
					margin-top: 8rpx;
				}
			}
		}

		.function-list {
			background-color: #fff;
			border-radius: 16rpx;

			.function-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.item-left {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}

		.arrow {
			color: #999;
			font-size: 28rpx;
		}

		.logout-btn {
			margin-top: 40rpx;
			background-color: #fff;
			text-align: center;
			padding: 30rpx;
			border-radius: 16rpx;

			text {
				color: #666;
				font-size: 28rpx;
			}
		}
	}
</style>
